<template>
    <div class="topo-header">
        <p>{{ title }}</p>
        <div class="topo-header-right">
            <el-button type="primary" :size="size" @click="saveImage">保存图片</el-button>
        </div>
    </div>
</template>

<script setup>
/**
 * 拓扑图头部组件
 * @param {String} title - 拓扑图标题
 * @param {String} size - 按钮大小
 * @param {Object} graph - 拓扑图实例
 */
const props = defineProps({
    title: {
        type: String,
        default: '拓扑图名称'
    },
    size: {
        type: String,
        default: 'small'
    },
    graph: {
        type: Object,
        default: null
    }
})

/**
 * 保存拓扑图为PNG图片
 */
const saveImage = () => {
    if (props.graph) {
        const fileName = `${props.title || '拓扑图'}_${new Date().getTime()}.png`;
        props.graph.exportPNG(fileName);
    }
}
</script>

<style lang="scss" scoped>
.topo-header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--box-shadow-light);

    p {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
        margin: 0;
    }

    .topo-header-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}
</style>
